<template>
  <div id="recommendMusicList">
    <van-image
      class="bgImg"
      v-if="listInfo.backgroundCoverUrl"
      :src="listInfo.backgroundCoverUrl"
    />
    <van-cell v-else :title="listInfo.name" :label="listInfo.description">
      <template #icon>
        <van-image radius="15" class="cellImg" :src="listInfo.coverImgUrl" />
      </template>
    </van-cell>
    <div class="tit">
      <p>为你定制</p>
      <PlayAll :songData="musicList" class="playAll" />
    </div>
    <MusicItem
      v-for="item in musicList"
      :key="item.id"
      :id="item.id"
      :name="item.name"
      :artists="item.artists"
      :picUrl="item.picUrl"
      :duration="item.duration"
      :mvId="item.mvId"
    />
  </div>
</template>

<script>
import PlayAll from '@/components/PlayAll'
import { getMusicRecommend } from '@/api/music.js'
import MusicItem from '@/components/MusicItem'
export default {
  name: 'RecommendMusicList',
  data () {
    return {
      musicList: [],
      listInfo: {
        backgroundCoverUrl: '',
        coverImgUrl: '',
        name: '',
        description: ''
      }
    }
  },
  components: {
    MusicItem,
    PlayAll
  },
  created () {
    this.loadRecommendMusicList()
  },
  // 定义方法
  methods: {
    async loadRecommendMusicList () {
      const { playlist: res } = await getMusicRecommend({
        id: this.$route.params.id
      })
      res.tracks.map((item, index) => {
        const data = {
          name: item.name,
          artists: item.ar[0].name,
          picUrl: item.al.picUrl,
          duration: item.dt,
          mvId: item.mv,
          id: res.trackIds[index].id,
          mid: res.trackIds[index].id
        }
        this.musicList.push(data)
      })
      this.listInfo = {
        backgroundCoverUrl: res.backgroundCoverUrl,
        coverImgUrl: res.coverImgUrl,
        name: res.name,
        description: res.description
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-cell {
  display: flex;
  align-items: center;
  background: linear-gradient(to top, #bba678, #7ba3bbd8);
  color: #fff;
  .van-cell__label {
    color: #fff;
  }
  .cellImg {
    width: 100px;
    height: 100px;
  }
}
.tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  p {
    font-size: 14px;
    font-weight: 700;
  }
  .playAll {
    margin-bottom: 5px;
  }
}
</style>
